<template>
	<view class="shopDetail">
		<view class="bgImg imgPublic">
			<image :src="datas.main_img" mode="widthFix"></image>
			<div class='imgZz'></div>
		</view>
		<view class="container">
			<view class="banner">
				<u-swiper :list="banner" keyName="image" :autoplay="true" :height='swHeight' :indicator='true'></u-swiper>
			</view>
			<view class="baseInfo">
				<view class="shopName">{{datas.title}}</view>
				<view class="intro">{{datas.description?datas.description:'暂无相关介绍'}}</view>
				<view class="fujia dFlex jBetween_aEnd">
					<view class="showPrice dFlex jStart_aCenter">
						<view class="price">¥<text>{{datas.price?datas.price:'0.00'}}</text></view>
						<view class="oldPrice">￥{{datas.old_price?datas.old_price:'0.00'}}</view>
					</view>
					<view class="sale">累计销量：{{datas.salenum?datas.salenum:'0'}}件</view>
				</view>
			</view>
			<view class="part" v-if='datas.brandinfo && datas.brandinfo.content'>
				<view class='partTit dFlex jBetween_aCenter' style='border-bottom:none;'>
					<text>品牌故事</text>
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
				<view class="partVal">
					<view class="store" v-html='datas.brandinfo.content'></view>
					<view class="more dFlex jEnd_aCenter" @click='goPage(1)'>
						<text>了解更多</text>
						<u-icon name="arrow-right" class='smallIcon' color='#409eff'></u-icon>
					</view>
				</view>
			</view>
			<view class="part">
				<view class='partTit dFlex jBetween_aCenter' style='border-bottom:none;'>
					<text>用户评价({{commentCount}})</text>
					<view class="right dFlex jEnd_aCenter" @click='goPage(2)' v-if='commentCount > 5'>
						<text>查看更多</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="partVal">
					<view class='list'>
						<view class='commentOne dFlex jStart_aStart ' v-for="(item,index) in comment" :key='index'>
							<u-avatar :src="item.avatar"></u-avatar>
							<view class='commentContent'>
								<view class="nickname">{{item.user_name}}</view>
								<view class='desc'>{{item.content}}</view>
								<view class='time' v-if='item.createtime'>{{tools.timestamptoData((item.createtime).toString(),1)}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="shopDesc">
				<view class="titles dFlex jCenter_aCenter">
					<view class="line"></view>
					<view class="showTit">商品详情</view>
					<view class="line"></view>
				</view>
				<view class='desc' v-html='datas.content'></view>
			</view>
			<view class="seat"></view>
		</view>
		<view class="bottomBtns dFlex jAround_aCenter">
			<view class='leftBtn dFlex jAround_aCenter'>
				<button open-type="contact" class="smallBtn">
					<view class="btnIcon imgPublic">
						<image src='/static/images/kf@2x.png' mode="widthFix"></image>
					</view>
					<text>客服</text>
				</button>
				<view class="smallBtn" @click="goPage(3)">
					<view class="btnIcon imgPublic">
						<image src='/static/images/smallCar.png' mode="widthFix"></image>
					</view>
					<text>购物车</text>
				</view>
				<view class="smallBtn" @click.stop='changeCollect'>
					<view class="btnIcon imgPublic">
						<image v-if='datas.is_collect == "0"' src='/static/images/collect.png' mode="widthFix"></image>
						<image v-if='datas.is_collect == "1"' src='/static/images/collect2.png' mode="widthFix"></image>
					</view>
					<text>收藏</text>
				</view>
			</view>
			<view class='btns dFlex jAround_aCenter'>
				<view class="btn addCar" @click='specsFlag = true;activeBtn = "1"'>加入购物车</view>
				<view class="btn buy" @click='specsFlag = true;activeBtn = "2"'>立即购买</view>
			</view>
		</view>
		<!-- 规格弹窗 -->
		<view class="zz dFlex flexDirection jEnd_aCenter" v-if='specsFlag' @click='specsFlag = false'>
			<view class="specsContent" slot='default'>
				<view class="shopInfo dFlex jStart_aStart">
					<view class="shopImg imgPublic">
						<image :src="datas.main_img" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="shopName">{{datas.title}}</view>
						<view class="base dFlex jBetween_aCenter">
							<view class="price">￥<text>{{showPrice?showPrice:'0.00'}}</text></view>
							<!-- <view class='inventory'>库存：10件</view> -->
						</view>
						<view class="specs" v-if='selSpecStr'>已选：{{selSpecStr}}</view>
					</view>
				</view>
				<view class="specsList">
					<view class="specsOne" v-for="(item,index) in spec" :key='index'>
						<view class="specsTit">{{item.name}}</view>
						<view class="list" v-if="item.arr.length">
							<view :class="['specs_one',selSpec[index].id == item2.id?'active':'']" @tap.stop='selSpecOne(index,index2)' v-for="(item2,index2) in item.arr" :key='index2'>{{item2.name}}</view>
						</view>
					</view>
				</view>
				<view class="buyCount dFlex jBetween_aCenter">
					<text>购买数量</text>
					<u-number-box v-model="buyCount" :min="1"></u-number-box>
				</view>
				<view class="sunBtn" @click="operateBtn">确 定</view>
				<u-safe-bottom></u-safe-bottom>
			</view>
		</view>
		<!-- 登录弹窗 -->
		<view class="zz dFlex jCenter_aCenter" v-if='loginFlag'>
			<login-toast @closeLogin='loginFlag = false;'></login-toast>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsDetail,getGoodsCommentList,addShoppingCart,collectGoods
	} from '@/tools/http.js';
	import tools from '@/tools/tools.js';
	import loginToast from '@/components/loginToast.vue';
	export default {
		components:{
			loginToast,
		},
		data() {
			return {
				swHeight:'',
				banner:[],
				id:'',
				datas:{},
				// 购买数量
				specsFlag:false,
				buyCount:1,
				
				comment:[],//评价列表
				commentCount:0,
				spec:[],//规格列表
				selSpec:[],//选择的商品规格
				selSpecStr:'',//规格名称
				selSpecId:'',//选择的规格ID
				showPrice:'',//选择的规格对应的单价
				
				activeBtn:'',// 1加入购物车  2直接购买
				loginFlag:false,
			};
		},
		onLoad(e){
			this.id = e.id;
			this.getShopInfo();
			this.getShopComment();
		},
		onShow(){
			
		},
		onShareAppMessage() {
			return{
				title:this.datas.title,
				path:'/index/shopDetail?id='+this.id,
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		onShareTimeline() {
			return{
				title:this.datas.title,
				path:'/index/shopDetail?id='+this.id,
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		methods:{
			// 修改收藏
			async changeCollect(){
				let res = await collectGoods({
					id:this.id,
					type:'1',
				})
				if(res){
					this.datas.is_collect = !this.datas.is_collect;
				}
			},
			// 商品详情
			async getShopInfo(){
				let res = await getGoodsDetail({
					id:this.id,
				})
				if(res){
					res.loops = res.loops.split(',');
					this.banner = res.loops.map((item,index)=>{
						return {
							id:index,
							image:item
						}
					})
					if(res.use_attr){//多规格
						// 规格名称
						let spec_name = res.attr_group.split('_');
						spec_name.map((item,index)=>{
							this.spec.push({
								name:item,
								arr:[],
							})
						})
						// 规格值
						res.attribute_list.map((item,index)=>{
							let item_ids = item.id.split('_');
							let item_name = item.name.split('_');
							item_ids.map((item2,index2)=>{
								let idx = tools.getIdx(this.spec[index2].arr,'id',item2);
								if(idx == -1){
									this.spec[index2].arr.push({
										id:item2,
										name:item_name[index2]
									})
								}
							})
						})
						for(let i=0;i<this.spec.length;i++){
							this.selSpec.push(this.spec[i].arr[0]);
							this.selSpecStr = i!=this.spec.length-1?this.selSpecStr+this.spec[i].arr[0].name+"_":this.selSpecStr+this.spec[i].arr[0].name;
							this.selSpecId = i!=this.spec.length-1?this.selSpecId+this.spec[i].arr[0].id+"_":this.selSpecId+this.spec[i].arr[0].id;
						}
						// 选择的规格的价格
						for(let i=0;i<res.attribute_list.length;i++){
							if(res.attribute_list[i].id == this.selSpecId){
								this.showPrice = res.attribute_list[i].price;
								// if(res[i].stock>0){
								// 	this.canOrder = true;
								// }else{
								// 	this.canOrder = false;
								// }
							}
						}
					}else{ // 默认规格
						this.spec = [
							{
								name:'默认规格',
								arr:[{id:'0',name:'默认规格',stock:res.stock,price:res.price,weight:res.weight}]
							}
						],
						this.selSpec = [{id:'0',name:"默认规格"}];
						this.selSpecStr = '默认规格';
						this.showPrice = res.price;
					}
					this.getAdvImgHeight();
					const reg = new RegExp('<img', 'gi');
					res.content = res.content.replace(reg, `<img style="width: 100%!important;"`);
					this.datas = res;
				}
			},
			// 商品评价列表
			async getShopComment(){
				let res = await getGoodsCommentList({
					id:this.id,
				});
				if(res){
					this.comment = res.comlists.length ? res.comlists.slice(0,5) : [];
					this.commentCount = res.total;
				}
			},
			// 确定按钮 activeBtn 1加入购物车  2直接购买
			async operateBtn(){
				if(uni.getStorageSync('uToken')){
					let res = null;
					if(this.activeBtn == '1'){
						res = await addShoppingCart({
							goods_id:this.id,
							goods_attr_id:this.selSpecId,
							num:this.buyCount,
						});
						if(res){
							uni.showToast({
								title:'添加购物车成功',
								icon:"success"
							})
							this.specsFlag = false;
							this.buyCount = 1;
						}
					}else{
						uni.navigateTo({
							url:'./beforeOrder?status=1&goodsAttrId='+this.selSpecId+'&num='+this.buyCount+'&id='+this.id,
						})
					}
				}else{
					this.loginFlag = true;
				}
			},
			// 选择规格
			selSpecOne(idx1,idx2){
				let arr = this.spec[idx1].arr;
				this.selSpec.splice(idx1,1,arr[idx2]);
				// 选择的规格的名称
				this.selSpecStr = '';
				this.selSpecId = '';
				this.selSpec.map((item,index)=>{
					if(index!=this.selSpec.length-1){
						this.selSpecStr = this.selSpecStr + item.name + '_';
						this.selSpecId = this.selSpecId + item.id + '_';
					}else{
						this.selSpecStr = this.selSpecStr + item.name;
						this.selSpecId = this.selSpecId + item.id;
					}
				})
				// 选择的规格的价格
				for(let i=0;i<this.datas.attribute_list.length;i++){
					if(this.datas.attribute_list[i].id == this.selSpecId){
						this.showPrice = this.datas.attribute_list[i].price;
						// if(this.datas.attribute_list[i].stock>0){
						// 	this.canOrder = true;
						// }else{
						// 	this.canOrder = false;
						// }
					}
				}
			},
			getAdvImgHeight(){
				uni.getImageInfo({
					src:this.banner[0].image,
					success: (info) => {
						let rate = info.width / info.height;
						this.swHeight = (uni.getSystemInfoSync().windowWidth * 0.948) / rate; 
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
			// 页面跳转
			goPage(status){
				if(status== '1'){
					uni.navigateTo({
						url:'./story?id='+this.id
					})
				}else if(status == '2'){
					uni.navigateTo({
						url:'./evaluate?id='+this.id
					})
				}else if(status == '3'){
					uni.switchTab({
						url:'/pages/car'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.shopDetail{
		width: 100%;
		position: relative;
		.zz{
			.specsContent{
				width:100%;
				background: white;
				padding:0 12px;
				box-sizing:border-box;
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
				.sunBtn{
					width:100%;
					padding: 8px 0;
					text-align: center;
					color:white;
					border-radius: 50px;
					background: linear-gradient(to right,#3e8ef0,#1665d1);
					margin-top: 10px;
				}
				.specsList{
					width:100%;
					margin-top: 12px;
					.specsOne{
						width:100%;
						margin-bottom: 12px;
						.list{
							width:100%;
							.specs_one{
								display: inline-block;
								width:max-content;
								background:#E6E6E6;
								color: #808080;
								font-size:10px;
								border-radius: 50px;
								padding:3px 8px;
								margin-right:8px;
								border: 1px solid #E6E6E6;
							}
							.active{
								color:#1362C9;
								background: #DCE8F7;
								border-color: #1362C9;
							}
						}
						.specsTit{
							width:100%;
							font-size:13px;
							font-weight: bold;
							margin-bottom: 6px;
						}
					}
				}
				.shopInfo{
					width:100%;
					background:white;
					padding:12px 0;
					
					.info{
						width:calc(100% - 102px);
						.base{
							width:100%;
							font-size:12px;
							margin:15px 0 6px;
							.inventory{
								color:#808080;
							}
							.price{
								color:#E32525;
								text{
									font-size: 18px;
									font-weight: bold;
								}
							}
							
						}
						.shopName{
							width:100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 15px;
							font-weight: bold;
						}
					}
					.shopImg{
						width: 90px;
						max-height: 90px;
						margin-right:12px;
						image{
							border-radius: 2px;
						}
					}
				}
			}
		}
		.bottomBtns{
			width:100%;
			background:white;
			padding:10px;
			box-sizing:border-box;
			position:fixed;
			bottom:0;
			left:0;
			z-index:5;
			.leftBtn{
				flex:1;
				.smallBtn{
					text-align:center;
					font-size:12px;
					.btnIcon{
						width:20px;
						height:20px;
						margin:0 auto 5px;
					}
				}
			}
			.btns{
				width:max-content;
				margin-left:12px;
				.btn{
					flex:1;
					text-align:center;
					padding:10px 25px;
					color:white;
					font-size:13px;
					white-space: nowrap;
				}
				.buy{
					border-top-right-radius: 50px;
					border-bottom-right-radius:50px;
					background: linear-gradient(to right,#fec803,#fb9f00);
				}
				.addCar{
					border-top-left-radius: 50px;
					background: linear-gradient(to right,#f97c01,#fd5c30);
					border-bottom-left-radius:50px;
				}
			}
		}
		.container{
			width: 100%;
			padding: 30px 2.6% 0;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			z-index:2;
			.shopDesc{
				width:100%;
				.titles{
					width: 100%;
					margin:12px 0;
					font-size:12px;
					.line{
						width: 50px;
						height: 0;
						border-top: 1px solid #808080;
						margin: 0 15px;
					}
				}
			}
			.part{
				width:100%;
				background:white;
				border-radius:5px;
				padding:0 12px;
				box-sizing:border-box;
				margin:15px auto;
				.partVal{
					width:100%;
					overflow:hidden;
					.list{
						width:100%;
						.commentOne{
							width:100%;
							padding:10px 0;
							border-bottom:1px solid #E6E6E6;
							.commentContent{
								margin-left:10px;
								flex:1;
								.desc{
									font-size:12px;
									margin:10px 0;
								}
								.time{
									font-size:12px;
									color:#808080;
								}
							}
						}
					}
					.store{
						color:#808080;
						font-size:12px;
						max-height:90px;
						overflow:hidden;
						line-height:20px;
					}
					.more{
						text-align:right;
						font-size:12px;
						width:fix-content;
						color:#409eff;
						margin:6px 0 12px;
					}
				}
				.partTit{
					width:100%;
					padding:10px 0;
					border-bottom:1px solid #E6E6E6;
					font-size:13px;
					font-weight:bold;
					.right{
						fontss-size:12px;
						font-weight:400;
						color:#808080;
					}
				}
			}
			.baseInfo{
				width:100%;
				background:white;
				padding:12px;
				box-sizing: border-box;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				.fujia{
					width:100%;
					font-size:12px;
					.price{
						color:#E32525;
						text{
							font-size:18px;
							font-weight:bold;
						}
					}
					.oldPrice{
						color:#808080;
						margin-left: 12px;
						text-decoration: line-through;
					}
					.sale{
						color:#808080;
					}
				}
				.intro{
					width:100%;
					margin:12px auto 30px;
					font-size:12px;
					color:#808080;
				}
				.shopName{
					width:100%;
					font-size: 15px;
					font-weight:bold;
				}
			}
		}
	}
	.bgImg{
		width: 100%;
		height:20vh;
		overflow: hidden;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius:4px;
		position:relative;
		.imgZz{
			width:100%;
			height:100%;
			z-index:1;
			position:absolute;
			top:0;
			left:0;
			background:rgba(0,0,0,0.5);
		}
	}
</style>
